<!DOCTYPE=html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>
        关于文档元素测试
    </title>
    <style>

        #father{

            width:200px;
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
            height:200px;
            background-color:grey;
            /**align-content: flex-start | flex-end | center | space-between | space-around | stretch; **/
/*
            align-content:stretch; !*默认设置，会拉伸容器内每个项目占用的空间，填充方式为给每个项目下方增加空白。第一个项目默认从容器顶端开始排列 *!
*/
/*
            align-content:Center; !*这个会取消项目之间的空白并把所有项目垂直居中。*!
*/
/*
            align-content:Flex-start;!*这个会取消项目之间的空白，并把项目放在容器顶部。*!
*/
       /*     align-content:flex-end;!*这个会取消项目之间的空白并把项目放在容器底部。*!
*/
/*
            align-content:space-between; !*这个会使项目在垂直方向两端对齐。即上面的项目对齐容器顶部，最下面一个项目对齐容器底部。留相同间隔在每个项目之间。*!
*/

            align-content:space-around;/*这个会使每个项目上下位置保留相同长度空白，使得项目之间的空白为两倍的单个项目空白。*/


        }
        .son1{

            height:30px;
            width:100px;
            background-color:orange;
        }

        .son2{

            height:30px;
            width:100px;
            background-color:red;
        }

        .son3{

            height:30px;
            width:100px;
            background-color:#08a9b5;
        }


        .son4{

            height:30px;
            width:100px;
            background-color:#9ad1c3;
        }

        .son5{

            height:30px;
            width:100px;
            background-color:rgb(21,123,126);
        }
    </style>
</head>
<body>

<div id="father">

    <div class="son1">
        q
    </div>

    <div class="son2">
        w
    </div>

    <div class="son3">
        e
    </div>
    <div class="son4">
        e
    </div>
    <div class="son5">
        e
    </div>



</div>

</body>
</html>